<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .main{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .bodyer{
            height: calc(100% - 130px);
            background: #ffffff url("../image/bg2.jpg")no-repeat;
            background-size: contain;
        }
        .header_t{
            border-bottom: 1px solid #3e93ff;
            background: #146ffb;
            /*background: red;*/
            height: 40px;
        }
        .header_b{
            height: 90px;
            width: 100%;
            background: url("../image/bg1.png")no-repeat;
            background-size: cover;
            background-position: center bottom;

        }
        .header_b>div{
            width: 65%;
            height: 100%;
            position: relative;
        }
        .header_b .news{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(25,102,203,0.9);
            height: 40px;
        }
        .header_b .news>div{
            flex : 1;
        }
        .header_b .news>div>p{
            cursor: pointer;
            width: 100%;
            color: #ffffff;
            text-indent: 50px;
            justify-content: flex-start;
            font-size: 12px;
        }
        .header_b .news>div:nth-of-type(2)>p{
            border-left: 1px solid #ffffff;
        }
        p{
            margin:  0 ;
        }
        body .header_t_c{
            width: 65%;
            height: 100%;
            justify-content: space-between;
            color: #ffffff;
        }
        .header_t_c>div{
            height: 100%;
        }
        .header_t_c ul {
            height: 100%;
        }
        .header_t_c ul li{
            height: 100%;
            padding: 0px 15px;
            box-sizing: border-box;
        }
        .header_t_c ul li span{
            display: flex;
            height: 100%;
            cursor: pointer;
        }
        body .header_t_c ul .ul_active{
            border-bottom: 2px solid #ffffff;
            box-sizing: border-box;
        }
        .photo{
            width: 30px;
            height: 30px;
            background: url("../image/head.png");
            background-size: cover;
            border-radius: 50%;
        }
        .name{
            padding: 0px 10px;
        }
        .quit_btn{
            color: #72afff;
            font-style: normal;
            font-size: 12px;
            height: 100%;
            cursor: pointer;
        }
        .power{
            align-items: flex-start;
            padding-top: 20px;
            box-sizing: border-box;
            width: 65%;
            justify-content: space-between;
            height: 100%;
            /*background: red;*/
        }
        .power_l{
            width: 200px;
            /*background: blue;*/
            height: 100%;
        }
        .power_r{
            box-shadow: 2px 2px 2px #c7c7c7;
            width: calc(100% - 240px);
            background: #ffffff;
            /*height: 100%;*/
            padding: 10px;
            /*box-sizing: border-box;*/
        }
        .search,.browse{
            box-shadow: 2px 2px 2px #c7c7c7;
            background: #fff;
            border-radius: 2px;
            box-sizing: border-box;
            width: 100%;
            /*padding: 10px;*/
        }
        .browse{
            margin-top: 20px;
        }
        .search_i_2{
            display: inline-block;
            border: 2px solid #999999;
        }
        .search_title,.browse_title{
            padding-top: 6px;
            height: 40px;
            justify-content: flex-start;
            border-bottom: 1px solid #efefef;
        }
        .search_i_1{
            margin-left: 10px;
            width: 20px;
            height: 20px;
            background: url("../image/icon_10.png")no-repeat center center;
            background-size: cover;
        }
        .search_text{
            color: #333333;
            margin-left: 10px;
            font-size: 16px;
            font-weight: bold;
        }
        .search ul,.browse ul{
            padding:10px;
            box-sizing: border-box;
        }
        .search li,.browse li{
            cursor: pointer;
            padding: 10px 0px;
            justify-content: flex-start;
        }
        .browse li span{
            color:#949697;
            margin-left: 10px;
            font-size: 12px;
        }
        .search li div{
            font-size: 12px;
        }
        .search li>div:nth-of-type(1){
            width: 50px;
            color: #666666;
        }
        .search li>div:nth-of-type(2){
            color:#949697;
            box-sizing: border-box;
            padding-left: 10px;
            width: calc(100% - 50px);
        }
        .power_r_title{
            font-size: 14px;
        }
        .power_r_title{
            text-align: center;
            font-size: 16px;
            line-height: 40px;
        }
        .file{
            font-size: 14px;
            cursor: pointer;
            text-align: right;
            color: #1772fa;
            padding: 5px;
        }
        .power_r_content{
            padding: 10px;
        }



    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header_t flex">
            <div class="header_t_c flex">
                <div class="flex">动态信息知识库</div>
                <div>
                    <ul class="flex">
                        <li class="flex"><span class="flex home_page">首页</span></li>
                        <li class="flex"><span class="flex knowledge_page">知识库</span></li>
                        <li class="flex"><span class="flex">系统管理</span></li>
                        <!--<li class="flex"><span class="flex">登陆</span></li>-->
                        <li class="flex">
                            <i class="photo"></i><span class="flex name my_page">你好</span><i class="quit_btn flex">退出</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_b flex"> </div>
    </div>
    <div class="bodyer flex">
        <div class="power flex">
            <div class="power_l">
                <div class="search">
                    <div class="search_title flex">
                        <i class="search_i_1"></i>
                        <span class="search_text">文件属性</span>
                    </div>
                    <div class="search_content">
                        <ul class="search_ul">

                        </ul>
                    </div>
                </div>
                <div class="browse">
                    <div class="browse_title flex">
                        <i class="search_i_1"></i>
                        <span class="search_text">最近浏览</span>
                    </div>
                    <div class="browse_content">
                        <ul class="browse_ul">

                        </ul>
                    </div>
                </div>
            </div>
            <div class="power_r">
                <div class="search_text">内容详情</div>
                <div class="power_r_title"></div>
                <div class="power_r_content">
                    <div class="power_r_file"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script id="item_list_tem" type="text/x-dot-template">
        {{~it:value:index}}
        <li class="flex"><i class="search_i_2"></i><span>{{=value}}</span></li>
        {{~}}
    </script>
    <script id="item_list_tem2" type="text/x-dot-template">
        <li class="flex"><div>文章标题</div><div>{{=it.noticeTitle}}</div></li>
        <li class="flex"><div>作者</div><div>{{=it.createBy}}</div></li>
        <li class="flex"><div>发布时间</div><div>{{=it.createTime}}</div></li>
    </script>


    <script id="item_list_tem4" type="text/x-dot-template">
        {{~it:value:index}}
        <li class="flex"><i class="search_i_2"></i><span class="browser_item" id_="{{=value.id}}">{{=value.title}}</span></li>
        {{~}}
    </script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/url.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/doT.min.js"></script>
    <script>
        var noticeId = '';
        $(function(){
            render_user();
            if(GetQueryString('id')&&GetQueryString('id')!=""){
                noticeId = GetQueryString('id');
                // noticeId = '0019745724884dd88cb77c7f4db7b87a';
                get_page_data()
            }
            $('body').on('click','.browser_item',function () {
                var id_ = $(this).attr('id_');
                url_jump('detail',{"id":id_})
            })
        });

        function data_handle(res) {
            var ti = res.createTime.split(' ')[0].replace(/-/g,'/');
            res.createTime = ti;
            doT_render('.search_ul','#item_list_tem2',res);
            $('.power_r_title').html(res.noticeTitle);
            $('.power_r_content').html(res.noticeContent)
        }

        function get_page_data() {
            var option = option_structure([
                {
                    "method" : "post",
                    "url" : ajax_url.latestBrowserHis,
                    "data" : {"pageSize":"4"}
                },
                {
                    "method" : "get",
                    "url" : ajax_url.noticeDetail+'?noticeId='+noticeId
                }
            ]);
            var back = callback_structure([
                function (res) {
                    judge_data(res,function (data) {
                        doT_render('.browse_ul','#item_list_tem4',data);
                    })
                },
                data_handle
            ]);
            pro_all(option,back)
        }
    </script>
</body>
</html>